.dx-size-default() {
    @GENERIC_SLIDER_HEIGHT: 28px;
    @GENERIC_SLIDER_WIDTH: 14px;
    @GENERIC_SLIDER_TRACK_HEIGHT: 4px;
}
.dx-size-compact() {
    @GENERIC_SLIDER_HEIGHT: 20px;
    @GENERIC_SLIDER_WIDTH: 9px;
    @GENERIC_SLIDER_TRACK_HEIGHT: 2px;
}

@GENERIC_SLIDER_RADIUS: 2px;


.dx-slider {
    .dx-tooltip-wrapper {
        .dx-overlay-content {
            .box-shadow(none);
        }
    }
}

.dx-slider-wrapper {
    height: @GENERIC_SLIDER_HEIGHT;
}

.dx-slider-bar {
    margin: @GENERIC_SLIDER_HEIGHT/2 @GENERIC_SLIDER_WIDTH / 2;
    height: @GENERIC_SLIDER_TRACK_HEIGHT;
    background: @slider-bar-bg;
    .border-radius(@GENERIC_SLIDER_RADIUS);
}

.dx-slider-range {
    border: 1px solid transparent;
    height: @GENERIC_SLIDER_TRACK_HEIGHT - 2px;
    .box-sizing(content-box);

    &.dx-slider-range-visible {
        border: 1px solid @slider-range-border-color;
        background: @slider-range-bg;
        .border-radius(@GENERIC_SLIDER_RADIUS);
    }
}

.dx-slider-label-position-bottom {
    .dx-slider-label {
        bottom: -17px;
    }
}

.dx-slider-label-position-top {
    .dx-slider-label {
        top: -14px;
    }
}


.dx-slider-handle {
    margin-top: -@GENERIC_SLIDER_HEIGHT / 2;
    margin-right: -@GENERIC_SLIDER_WIDTH / 2;
    width: @GENERIC_SLIDER_WIDTH;
    height: @GENERIC_SLIDER_HEIGHT;
    border: 1px solid @slider-handle-border-color;
    background-color: @slider-handle-bg;
    .border-radius(@slider-handle-border-radius);
    .box-sizing(content-box);
}

.dx-state-disabled .dx-slider,
.dx-state-disabled.dx-slider  {
    opacity: 1;

    .dx-slider-bar {
        opacity: .5;
    }
}

.dx-state-active {
    &.dx-slider-handle {
        border: 1px solid @slider-handle-border-color;
        background: @slider-handle-active-bg;
        .box-shadow(none);
    }
}

.dx-state-focused{
    &.dx-slider-handle:not(.dx-state-active) {
        border: 1px solid @slider-handle-border-color;
        background: @slider-handle-focused-bg;
        .box-shadow(none);
    }
}

.dx-state-hover {
    &.dx-slider-handle:not(.dx-state-active) {
        border: 1px solid @slider-handle-border-color;
        background: @slider-handle-hover-bg;
    }
}

.dx-rtl .dx-slider-handle {
    margin-left: -(@GENERIC_SLIDER_WIDTH + 1px) / 2;
}

